<template>
<!--  <h2>预约设置</h2>-->
  <div>
    <div class="content-header">
      <h1>预约管理<small>预约设置</small></h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>预约管理</el-breadcrumb-item>
        <el-breadcrumb-item>预约设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="app-container">
      <div class="box">
        <div class="box ordersetting">
          <el-card class="box-card">
            <div class="boxMain">
              <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="downloadTemplate()">模板下载</el-button>
              <el-upload action="/api/ordersetting/upload.do"
                          :headers="up_header"
                         name="excelFile"
                         :show-file-list="false"
                         :on-success="handleSuccess"
                         :before-upload="beforeUpload">
                <el-button type="primary">上传文件</el-button>
              </el-upload>
            </div>
            <div>
              操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
            </div>
          </el-card>
          <div class="calendar">
            <!-- 年份 月份 -->
            <div class="month">
              <div class="currentdate">
                <span class="choose-year">{{ currentYear }}年</span>
                <span class="choose-month">{{ currentMonth }}月</span>
              </div>
              <div class="choose">
                <span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
                <span @click="pickPre(currentYear,currentMonth)">❮</span>
                <span @click="pickNext(currentYear,currentMonth)">❯</span>
              </div>
              <div class="clearfix"></div>
            </div>
            <!-- 星期 -->
            <div class="caldate">
              <ul class="weekdays">
                <li>周一</li>
                <li>周二</li>
                <li>周三</li>
                <li>周四</li>
                <li>周五</li>
                <li>周六</li>
                <li>周日</li>
              </ul>
              <!-- 日期 -->
              <ul class="days">
                <!-- v-for循环 每一次循环用<li>标签创建一天 -->
                <li v-for="dayobject in days">
                  <template>
                    <!-- 非当前月份 -->
                    <div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">
                      {{ dayobject.day.getDate() }}
                    </div>
                    <!-- 当前月 -->
                    <div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth">
                      <span class="datenumber">{{ dayobject.day.getDate()}}</span>

                      <template>
                        <template v-for="obj in leftobj">
                          <template v-if="obj.date == dayobject.day.getDate()">
                            <template v-if="obj.number > obj.reservations">
                              <div class="usual">
                                <p>可预约{{obj.number}}人</p>
                                <p>已预约{{obj.reservations}}人</p>
                              </div>
                            </template>
                            <template v-else>
                              <div class="fulled">
                                <p>可预约{{obj.number}}人</p>
                                <p>已预约{{obj.reservations}}人</p>
                                <p>已满</p>
                              </div>
                            </template>
                          </template>
                        </template>
                        <button v-if="dayobject.day.getDate() > today.getDate() - 1" @click="handleOrderSet(dayobject.day)" class="orderbtn">设置</button>
                      </template>

                    </div>
                  </template>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AppointmentSetUp",
  data(){
    return {
      headers:this.$cookies.get("token") != null ? this.$cookies.get("token") : '',
      up_header:{
        'token':this.headers
      },
      today:new Date(),//当前日期
      currentDay: 1,
      currentMonth: new Date().getMonth(),
      LocalMonth: 1,
      // currentYear: 2019,
      currentYear: new Date().getFullYear(),
      currentWeek: 1,
      days: [],
      leftobj: []//用于装载页面显示的月份已经进行预约设置的数据
    }
  },
  methods:{
    //预约设置
    handleOrderSet(day){
      this.$prompt('请输入邮箱', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[0-9]*[1-9][0-9]*$/,
        inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        this.$axios.post("/api/ordersetting/setOrderSetting.do",{
          orderDate:this.formatDate(day.getFullYear(),day.getMonth()+1,day.getDate()), //日期
          number:value   //可预约人数
        },{
          headers:{
          'token':this.headers
          }}).then((response)=>{
          if(response.data.flag){
            this.initData(this.formatDate(day.getFullYear(), day.getMonth() + 1, 1));
            this.$message({
              type: 'success',
              message: response.data.message
            });
          }else{
            this.$message.error(response.data.message);
          }
        });
      })
    },
    //上传之前进行文件格式校验
    beforeUpload(file){
      const isXLS = file.type === 'application/vnd.ms-excel';
      if(isXLS){
        return true;
      }
      const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (isXLSX) {
        return true;
      }
      this.$message.error('上传文件只能是xls或者xlsx格式!');
      return false;
    },
    //下载模板文件
    downloadTemplate(){
      window.location.href="https://health-wanglijie.oss-cn-hangzhou.aliyuncs.com/excel/ordersetting_template.xlsx";
    },
    //上传成功提示
    handleSuccess(response, file) {
      if(response.flag){
        this.$message({
          message: response.message,
          type: 'success'
        });
      }else{
        this.$message.error(response.message);
      }
      console.log(response, file);
    },
    //初始化当前页要展示的日期
    initData: function (cur) {
      console.log(cur)
      var date;
      var index = 0;   //控制显示预定的天数
      if (cur) {
        date = new Date(cur);
      } else {
        var now = new Date();
        var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
        d.setDate(35);
        date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
      }
      this.currentDay = date.getDate();
      this.currentYear = date.getFullYear();
      this.currentMonth = date.getMonth() + 1;
      this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
      var today = new Date();
      this.LocalMonth = today.getMonth() + 1;
      if (this.currentWeek == 0) {
        this.currentWeek = 7;
      }
      var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
      this.days.length = 0;
      // 今天是周日，放在第一行第7个位置，前面6个
      //初始化本周
      for (var i = this.currentWeek - 1; i >= 0; i--) {
        var d = new Date(str);
        d.setDate(d.getDate() - i);
        var dayobject = {};
        dayobject.day = d;
        var now = new Date();
        if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
          dayobject.index = index++;//从今天开始显示供预定的数量
        }
        else if (index != 0 && index < 3)
          dayobject.index = index++;//从今天开始3天内显示供预定的数量
        this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
      }
      //其他周
      for (var i = 1; i <= 35 - this.currentWeek; i++) {
        var d = new Date(str);
        d.setDate(d.getDate() + i);
        var dayobject = {};//dayobject   {day:date,index:2}
        dayobject.day = d;
        var now = new Date();
        if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
          dayobject.index = index++;
        }
        else if (index != 0 && index < 3)
          dayobject.index = index++;
        this.days.push(dayobject);
      }

      // this.leftobj = [
      //     { date: 1, number: 120, reservations: 1 },
      //     { date: 3, number: 120, reservations: 1 },
      //     { date: 4, number: 120, reservations: 120 },
      //     { date: 6, number: 120, reservations: 1 },
      //     { date: 8, number: 120, reservations: 1 }
      // ];

      this.$axios.post(`/api/ordersetting/getOrderSettingByMonth.do?date=${this.currentYear}-${this.currentMonth}`,{},{
        headers:this.headers
      }).then((res)=>{
        // console.log(res.data)
        if(res.data.flag){
          this.leftobj = res.data.data
          // console.log("days "+JSON.stringify(this.days[1]))
          // console.log(this.leftobj)
        }else{
          this.$message.error(res.data.message)
        }
      })
    },
    //切换到当前月份
    goCurrentMonth: function (year, month) {
      var d = new Date();
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    //向前一个月
    pickPre: function (year, month) {
      // setDate(0); 上月最后一天
      // setDate(-1); 上月倒数第二天
      // setDate(dx) 参数dx为 上月最后一天的前后dx天
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(0);
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    //向后一个月
    pickNext: function (year, month) {
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(35);////获取指定天之后的日期
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    // 返回 类似 2016-01-02 格式的字符串
    formatDate: function (year, month, day) {
      var y = year;
      var m = month;
      if (m < 10) m = "0" + m;
      var d = day;
      if (d < 10) d = "0" + d;
      return y + "-" + m + "-" + d
    }
  }
}
</script>

<style scoped>

</style>